<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
      <el-form-item :label="$t('holiday_name')" prop="vacationName">
        <el-input v-model="queryParams.vacationName" :placeholder="$t('please_enter', { name: $t('holiday_name') })"
          clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item :label="$t('holiday_type')" prop="vacationType">
        <el-select v-model="queryParams.vacationType" :placeholder="$t('please_select', { name: $t('holiday_type') })"
          clearable>
          <el-option v-for="dict in dict.type.vacation_type" :key="dict.value" :label="dict.label"
            :value="parseInt(dict.value)" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-date-picker v-model="queryParams.day" type="date" placeholder="选择日期" value-format="yyyy-MM-dd">
        </el-date-picker>
      </el-form-item>
      <!-- <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery('year')">{{ $t("year")
          }}</el-button>

      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery('month')">{{ $t("month")
          }}</el-button>

      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery('day')">{{ $t("day")
          }}</el-button>

      </el-form-item> -->
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">{{ $t("search") }}</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{
      $t("reset")
    }}</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
          v-hasPermi="['vacation:vacationList:add']">{{ $t("add_new_holiday") }}</el-button>
      </el-col>
      <!-- <el-col :span="1.5">
        <el-button type="info" plain icon="el-icon-upload2" size="mini" @click="handleImport"
        v-hasPermi="['vacation:vacationList:import']">导入</el-button>
      </el-col> -->
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
          v-hasPermi="['vacation:vacationList:export']">{{ $t("export") }}</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <vacationTable :loading="loading" :tableData="scheduleList">
      <el-table-column :label="$t('action')" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" v-hasPermi="['vacation:vacationList:view']" type="text" icon="el-icon-view"
            @click="handleView(scope.row)">{{ $t("view") }}</el-button>
          <el-button size="mini" v-hasPermi="['vacation:vacationList:edit']" type="text" icon="el-icon-edit"
            @click="handleUpdate(scope.row)">{{ $t("modify") }}</el-button>
          <el-button size="mini" v-hasPermi="['vacation:vacationList:delete']" type="text" icon="el-icon-delete"
            @click="handleDelete(scope.row)">{{ $t("delete") }}</el-button>
        </template>
      </el-table-column>
    </vacationTable>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" 
      :page-sizes="[10,20,30,50,100, 200]"
      />

    <!-- 添加或修改假期对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="180px" :disabled="lookView">
        <el-card class="box-card" style="margin-bottom: 20px">
          <div slot="header" class="clearfix">
            <span>{{ $t("basic_information") }}</span>
          </div>
          <el-form-item :label="$t('holiday_name')" label-width="80px" prop="vacationName">
            <el-input v-model="form.vacationName" :placeholder="$t('please_enter', { name: $t('holiday_name') })"
              :show-word-limit="true" />
          </el-form-item>
          <el-form-item :label="$t('holiday_code')" label-width="80px" prop="vacationCode">
            <el-input v-model="form.vacationCode" :placeholder="$t('please_enter', { name: $t('holiday_code') })"
              :show-word-limit="true" />
          </el-form-item>
          <el-form-item :label="$t('holiday_type')" label-width="80px" prop="vacationType">
            <el-select v-model="form.vacationType" :placeholder="$t('please_select', { name: $t('holiday_type') })"
              @change="changeVacationType" :disabled="form.id" style="width: 100%">
              <el-option v-for="dict in dict.type.vacation_type" :key="dict.value" :label="dict.label"
                :value="parseInt(dict.value)"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('remarks')" label-width="80px" prop="remark">
            <el-input v-model="form.remark" :rows="4" :show-word-limit="true" type="textarea"
              :placeholder="$t('please_enter', { name: $t('remarks') })" />
          </el-form-item>
        </el-card>

        <el-card class="box-card" style="margin-bottom: 20px" v-if="form.vacationType != null">
          <div slot="header" class="clearfix">
            <span>{{ $t("holiday_setting") }}</span>
          </div>
          <!-- 公众法定假期 -->
          <div v-if="form.vacationType == 0">
            <el-form-item :label="$t('permission_of_annual_cycle')" prop="isCirculate">
              <el-select @change="changeIsCirculate" v-model="form.officialVacation.isCirculate" :placeholder="$t('please_select', {
      name: $t('permission_of_annual_cycle'),
    })
      " style="width: 100%">
                <el-option v-for="dict in dict.type.sys_yes_no" :key="dict.value" :label="dict.label"
                  :value="parseInt(dict.value)"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('start_date')" prop="vacationStartDate">
              <div :class="form.officialVacation.isCirculate ? 'picker-date' : ''">
                <el-date-picker type="date" v-model="form.officialVacation.vacationStartDate" :editable="false"
                  :value-format="form.officialVacation.isCirculate ? 'MM-dd' : 'yyyy-MM-dd'
      " :format="form.officialVacation.isCirculate ? 'MM-dd' : 'yyyy-MM-dd'
      " :placeholder="$t('please_select', { name: $t('start_date') })" :append-to-body="false" style="width: 100%"
                  @change="changeVacationStartDate"></el-date-picker>
              </div>
            </el-form-item>
            <el-form-item :label="$t('ending_date')" prop="vacationEndDate">
              <div :class="form.officialVacation.isCirculate ? 'picker-date' : ''">
                <el-date-picker type="date" v-model="form.officialVacation.vacationEndDate" :editable="false"
                  :picker-options="pickerOptionsStart" @focus="setDisabled" :value-format="form.officialVacation.isCirculate ? 'MM-dd' : 'yyyy-MM-dd'
      " :format="form.officialVacation.isCirculate ? 'MM-dd' : 'yyyy-MM-dd'
      " :placeholder="$t('please_select', { name: $t('ending_date') })
      " :append-to-body="false" style="width: 100%"></el-date-picker>
              </div>
            </el-form-item>
            <el-form-item v-for="(domain, index) in form.officialVacation
      .compensatoryLeaveDateList" :label="$t('date_of_compensatory_day_off')" :key="index" prop="">
              <el-row :gutter="20">
                <el-col :span="16">
                  <div :class="form.officialVacation.isCirculate ? 'picker-date' : ''
      ">
                    <el-date-picker type="date" v-model="domain.compensatoryLeaveDate" :editable="false" :value-format="form.officialVacation.isCirculate
      ? 'MM-dd'
      : 'yyyy-MM-dd'
      " :format="form.officialVacation.isCirculate
      ? 'MM-dd'
      : 'yyyy-MM-dd'
      " :placeholder="$t('please_select', {
      name: $t('date_of_compensatory_day_off'),
    })
      " :append-to-body="false" style="width: 100%"></el-date-picker>
                  </div>
                </el-col>
                <el-col :span="3"><el-button @click.prevent="addDomain(domain)">{{
      $t("add")
    }}</el-button></el-col>
                <el-col :span="3"><el-button @click.prevent="removeDomain(domain)" v-if="index > 0">{{ $t("delete")
                    }}</el-button></el-col>
              </el-row>
            </el-form-item>
          </div>
          <!-- 自定义假期 -->
          <div v-if="form.vacationType == 1">
            <el-form-item prop="isContainOfficialVacation">
              <el-checkbox v-model="form.customVacation.isContainOfficialVacation" :true-label="1" :false-label="0">{{
      $t("including_public") }}</el-checkbox>
            </el-form-item>
            <el-form-item prop="isPaidVacation">
              <el-checkbox v-model="form.customVacation.isPaidVacation" :true-label="1" :false-label="0">{{
      $t("paid_leave")
    }}</el-checkbox>
            </el-form-item>
            <el-form-item :label="$t('leave_conditions')" prop="vacationConditionsOne">
              <el-select style="width: 100%" v-model="form.customVacation.vacationConditionsOne" :placeholder="$t('please_select', {
      name: $t('leave_conditions'),
    })
      ">
                <el-option v-for="dict in dict.type.leave_condition" :key="dict.value" :label="dict.label"
                  :value="parseInt(dict.value)"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="vacationConditionsTwo">
              <el-select style="width: 100%" v-model="form.customVacation.vacationConditionsTwo" :placeholder="$t('please_select', {
      name: $t('gender'),
    })
      ">
                <el-option v-for="dict in dict.type.leave_sex" :key="dict.value" :label="dict.label"
                  :value="parseInt(dict.value)"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="vacationConditionsThree">
              <el-select style="width: 100%" v-model="form.customVacation.vacationConditionsThree" :placeholder="$t('please_select', {
      name: $t('marital_status'),
    })
      ">
                <el-option v-for="dict in dict.type.leave_marital_status" :key="dict.value" :label="dict.label"
                  :value="parseInt(dict.value)"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('leave_application')" prop="minimumLeaveUnit">
              <el-select style="width: 100%" v-model="form.customVacation.minimumLeaveUnit" :placeholder="$t('please_select', {
      name: $t('leave_application'),
    })
      ">
                <el-option v-for="dict in dict.type.vacation_minimum_leave_unit" :key="dict.value" :label="dict.label"
                  :value="parseInt(dict.value)"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('application_duration')" prop="leaveTime">
              <el-select style="width: 100%" v-model="form.customVacation.calculationLeaveDuration" :placeholder="$t('please_select', {
      name: $t('application_duration'),
    })
      ">
                <el-option v-for="dict in dict.type.leave_time" :key="dict.value" :label="dict.label"
                  :value="parseInt(dict.value)"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('maximum_consecutive_days')" prop="consecutiveApplicationDays">
              <el-input v-model="form.customVacation.consecutiveApplicationDays" :placeholder="$t('please_select', {
      name: $t('maximum_consecutive_days'),
    })
      " maxlength="3" oninput="value=value.replace(/[^\d]/g,'')" style="width: 160px">
                <template slot="append">{{ $t("day") }}</template>
              </el-input>
            </el-form-item>
            <el-form-item prop="isEnableHolidayLimit">
              <el-checkbox @change="changeIsEnableHolidayLimit" v-model="form.customVacation.isEnableHolidayLimit"
                :true-label="1" :false-label="0">{{ $t("enable_holiday_quota") }}</el-checkbox>
            </el-form-item>
            <div v-if="form.customVacation.isEnableHolidayLimit == 1">
              <el-form-item :label="$t('allocation_method')" prop="allocationScheme">
                <el-select @change="changeAllocationScheme" style="width: 100%"
                  v-model="form.customVacation.allocationScheme" :placeholder="$t('please_select', {
      name: $t('allocation_method'),
    })
      ">
                  <el-option v-for="dict in dict.type.leave_distribution" :key="dict.value" :label="dict.label"
                    :value="parseInt(dict.value)"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item :label="$t('allocate_date')" prop="assignDate"
                v-if="form.customVacation.allocationScheme != 3">
                <el-select style="width: 100%" v-model="form.customVacation.assignDate" @change="changeAssignDate"
                  :placeholder="$t('please_select', {
      name: $t('allocate_date'),
    })
      ">
                  <el-option v-for="dict in dict.type.leave_distribution_date" :key="dict.value" :label="dict.label"
                    :value="dict.value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item :label="$t('allocate_date')" prop="assignDate" v-else>
                <el-select style="width: 100%" v-model="form.customVacation.assignDate" @change="changeAssignDate"
                  :placeholder="$t('please_select', {
      name: $t('allocate_date'),
    })
      ">
                  <el-option v-for="dict in dict.type.leave_distribution_date_day" :key="dict.value" :label="dict.label"
                    :value="dict.value"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item :label="$t('date_of_holiday')" prop="assignDateValue"
                v-if="form.customVacation.assignDate == 1">
                <!-- <el-date-picker type="date" v-model="form.customVacation.assignDateValue" :editable="false"
                  value-format="yyyy-MM-dd" placeholder="请选择放假日期" :append-to-body="false"
                  style="width: 100%"></el-date-picker> -->
                <div :class="form.customVacation.allocationScheme == 1
      ? 'picker-date'
      : ''
      " v-if="form.customVacation.allocationScheme != 2">
                  <el-date-picker type="date" v-model="form.customVacation.assignDateValue" :editable="false"
                    :value-format="form.customVacation.allocationScheme == 1
      ? 'MM-dd'
      : 'yyyy-MM-dd'
      " :format="form.customVacation.allocationScheme == 1
      ? 'MM-dd'
      : 'yyyy-MM-dd'
      " :placeholder="$t('please_select', {
      name: $t('start_date'),
    })
      " :append-to-body="false" style="width: 100%"></el-date-picker>
                </div>
                <div v-else>
                  <el-input v-model="form.customVacation.assignDateValue"
                    :placeholder="$t('please_enter', { name: '' })" maxlength="2" @input="assignDateValueChange"
                    style="width: 160px"><template slot="append">{{ $t("dailyDay") }}</template>
                  </el-input>
                </div>
              </el-form-item>
              <el-form-item :label="$t('allocation_rules')" prop="assignRule">
                <el-select style="width: 100%" v-model="form.customVacation.assignRule" @change="changeAssignRule"
                  :placeholder="$t('please_select', {
      name: $t('allocation_rules'),
    })
      ">
                  <el-option v-for="dict in dict.type.leave_distribution_rule" :key="dict.value" :label="dict.label"
                    :value="parseInt(dict.value)"></el-option>
                </el-select>
              </el-form-item>
              <template v-if="form.customVacation.assignRule">
                <el-form-item :label="$t('limitation_year')" prop="fixedLimitValue"
                  v-if="form.customVacation.assignRule == 1">
                  <!-- oninput="value=value.replace(/^(\\-)*(\d+)\.(\d\d).*$/, '$1$2.$3')"  保留小数点后两位 -->
                  <el-input v-model="form.customVacation.fixedLimitValue"
                    :placeholder="$t('please_enter', { name: '' })" style="width: 160px">
                    <template slot="append">{{ $t("day") }}</template>
                  </el-input>
                </el-form-item>
                <el-form-item :label="$t('limitation_year')" v-else>
                  <div v-for="(item, index) in form.customVacation
      .customVacationAssignRuleList" :key="index" style="margin-bottom: 10px">
                    {{
      form.customVacation.assignRule == 2
        ? $t("legal_length_service")
        : $t("seniority")
    }}>=<el-input v-model="item.workAge" :placeholder="$t('please_enter', { name: '' })" maxlength="3"
                      oninput="value=value.replace(/[^\d]/g,'')" style="width: 160px; margin: 0 10px">
                      <template slot="append">{{
      $t("year")
    }}</template> </el-input>{{ $t("enjoy")
                    }}<el-input v-model="item.vacationLimitValue" :placeholder="$t('please_enter', { name: '' })"
                      maxlength="3" oninput="value=value.replace(/[^\d]/g,'')" style="width: 160px; margin: 0 10px">
                      <template slot="append">{{
      $t("day")
    }}</template> </el-input>{{ $t("leave") }}
                    <i class="el-icon-delete" style="margin-left: 10px; cursor: pointer"
                      @click="handleDeleteAnnualLeave(index)" v-if="index != 0 && !lookView"></i>
                  </div>
                  <el-button type="text" icon="el-icon-add" @click="handleAddAnnualLeave">{{ $t("add") }}</el-button>
                </el-form-item>
              </template>
              <el-form-item :label="$t('converted_limitation')" prop="isConvertCreditLimitBasedOnboardingDate">
                <el-select style="width: 100%" :disabled="form.customVacation.allocationScheme != '1'" v-model="form.customVacation.isConvertCreditLimitBasedOnboardingDate
      " :placeholder="$t('please_select', { name: '' })" clearable >
                  <el-option v-for="dict in dict.type.yes_or_no" :key="dict.value" :label="dict.label"
                    :value="parseInt(dict.value)"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item :label="$t('period_of_validity')" prop="periodValidityType">
                <el-select @change="changePeriodValidityType" style="width: 100%" clearable 
                  v-model="form.customVacation.periodValidityType" :placeholder="$t('please_select', { name: $t('period_of_validity') })
      ">
                  <el-option v-for="dict in dict.type.leave_effective" :key="dict.value" :label="dict.label"
                    :value="parseInt(dict.value)"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item :label="$t('validity_days')" prop="customVacation.validityDays"
                v-if="form.customVacation.periodValidityType == 3">
                <el-input v-model="form.customVacation.validityDays" :placeholder="$t('please_enter', { name: '' })"
                  maxlength="3" oninput="value=value.replace(/[^\d]/g,'')" style="width: 160px">
                  <template slot="append">{{ $t("day") }}</template>
                </el-input>
              </el-form-item>
              <el-form-item :label="$t('validity_expired')" prop="expirationProcessingMethod">
                <el-radio-group v-model="form.customVacation.expirationProcessingMethod"
                  @input="changeExpirationProcessingMethod">
                  <el-radio :label="parseInt(dict.value)" v-for="dict in dict.type.leave_effective_full"
                    :key="dict.value">{{ dict.label }}</el-radio>
                    <el-radio label="">{{ $t('none') }}</el-radio>
                </el-radio-group>
                <div v-if="form.customVacation.expirationProcessingMethod === 0"  >
                  <!-- {{ $t("retain")
                  }}<el-input v-model="form.customVacation.retainedLimitPercentage" placeholder="" maxlength="3"
                    oninput="value=value.replace(/[^\d]/g,'')" style="width: 120px; margin: 0 10px">
                    <template slot="append">%</template> 
                    </el-input> -->
                    {{ $t("retention_period")
                  }}<el-input v-model="form.customVacation.retentionPeriodDays" placeholder="" maxlength="3"
                    oninput="value=value.replace(/[^\d]/g,'')" style="width: 120px; margin: 0 10px">
                    <template slot="append">{{ $t("day") }}</template>
                  </el-input>
                </div>
              </el-form-item>
              <el-form-item :label="$t('advanced_leave_request')" prop="isAllowAdvanceVacation">
                <el-select style="width: 100%" v-model="form.customVacation.isAllowAdvanceVacation"
                  @change="changeIsAllowAdvanceVacation" :placeholder="$t('please_select', { name: '' })">
                  <el-option v-for="dict in dict.type.yes_or_no" :key="dict.value" :label="dict.label"
                    :value="parseInt(dict.value)"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop="prepayableAmount" v-if="form.customVacation.isAllowAdvanceVacation == 1">
                <el-input v-model="form.customVacation.prepayableAmount" :placeholder="$t('please_enter', { name: '' })"
                  maxlength="3" oninput="value=value.replace(/[^\d]/g,'')" style="width: 160px">
                  <template slot="append">{{ $t("day") }}</template>
                </el-input>
              </el-form-item>
            </div>
          </div>
        </el-card>
      </el-form>
      <div slot="footer" class="dialog-footer" v-if="!lookView">
        <el-button type="primary" @click="submitForm">{{
      $t("confirm")
    }}</el-button>
        <el-button @click="cancel">{{ $t("cancel") }}</el-button>
      </div>
      <div slot="footer" class="dialog-footer" v-else>
        <el-button @click="cancel">{{ $t("cancel") }}</el-button>
      </div>
    </el-dialog>

    <!-- 导入弹窗 -->
    <importModal ref="importModal" :title="$t('import')" downloadUrl="schedule/schedules/downloadTemplate.do"
      uploadUrl="schedule/schedules/implateTemplate.do" :downloadName="$t('download_template')" @refreshList="getList">
    </importModal>
  </div>
</template>

<script>
import {
  listSchedule,
  getSchedule,
  delSchedule,
  addSchedule,
  updateSchedule,
} from "@/api/custom/vacationList";
import importModal from "@/views/components/custom/importModal.vue";
import vacationTable from "@/views/custom/vacationList/vacationTable.vue";
import moment from "moment";
export default {
  name: "Schedule",
  dicts: [
    "yes_or_no",
    "vacation_type",
    "sys_yes_no",
    "leave_condition",
    "leave_sex",
    "leave_marital_status",
    "leave_time",
    "leave_distribution",
    "leave_distribution_date",
    "leave_distribution_rule",
    "leave_effective",
    "leave_effective_full",
    "vacation_minimum_leave_unit",
    "leave_distribution_date_day",
  ],
  components: {
    importModal,
    vacationTable,
  },
  data() {
    return {
      pickerOptionsStart: {},
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 假期表格数据
      scheduleList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        vacationName: null,
        vacationType: null,
        day:'',
      },
      // 表单参数
      form: {
        officialVacation: {
          compensatoryLeaveDateList: [
            {
              compensatoryLeaveDate: "",
            },
          ],
          vacationStartDate: null,
          vacationEndDate: null,
        },
        customVacation: {
          customVacationAssignRuleList: [
            {
              vacationLimitValue: null,
              workAge: null,
            },
          ],
          retentionPeriodDays: null,
          retainedLimitPercentage: null,
          assignDate: null,
          assignDateValue: null,
          validityDays: null,
        },
      },
      // 表单校验
      rules: {
        'customVacation.validityDays':[
        {
            required: true,
            message: this.$t("cannot_empty", { name: this.$t("validity_days") }),
            trigger: "blur",
          },
        ]
,
        vacationName: [
          {
            required: true,
            message: this.$t("cannot_empty", { name: this.$t("holiday_name") }),
            trigger: "blur",
          },
        ],
        vacationCode: [
          {
            required: true,
            message: this.$t("cannot_empty", { name: this.$t("holiday_code") }),
            trigger: "blur",
          },
        ],
        vacationType: [
          {
            required: true,
            message: this.$t("cannot_empty", { name: this.$t("holiday_type") }),
            trigger: "change",
          },
        ],
      },
      lookView: false,

      lengthServiceList: [
        {
          year: null,
          days: null,
        },
      ],
      assignDateDisabled: false,
      startDateTime: null,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    assignDateValueChange(value) {
      value = value.replace(/[^\d]/g, '');
      if (value > 28) {
        value = 28
      }
      this.form.customVacation.assignDateValue = value;
    },
    /** 查询假期列表 */
    getList() {
      this.loading = true;
      listSchedule(this.queryParams).then((response) => {
        this.scheduleList = response.data.records;
        this.total = response.data.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        officialVacation: {
          compensatoryLeaveDateList: [
            {
              compensatoryLeaveDate: "",
            },
          ],
          vacationStartDate: null,
          vacationEndDate: null,
        },
        customVacation: {
          customVacationAssignRuleList: [
            {
              vacationLimitValue: null,
              workAge: null,
            },
          ],
          allocationScheme: null,
          retentionPeriodDays: null,
          retainedLimitPercentage: null,
          assignDate: null,
          assignDateValue: null,
          validityDays: null,
        },
      };
      this.lookView = false;
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      console.log('queryParams',this.queryParams)
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    // 修改假期类型
    changeVacationType(val) {
      if (val == 0) {
        this.form.customVacation = {
          customVacationAssignRuleList: [
            {
              vacationLimitValue: null,
              workAge: null,
            },
          ],
          assignDate: null,
          retentionPeriodDays: null,
          retainedLimitPercentage: null,
          assignDateValue: null,
          validityDays: null,
        };
      } else {
        this.form.officialVacation = {
          compensatoryLeaveDateList: [
            {
              compensatoryLeaveDate: "",
            },
          ],
          vacationStartDate: null,
          vacationEndDate: null,
        };
      }
    },
    changeVacationStartDate(val) {
      this.startDateTime = moment(val).valueOf();
    },
    setDisabled() {
      let that = this;
      this.pickerOptionsStart = {
        disabledDate(time) {
          if (that.startDateTime) {
            return time.getTime() < that.startDateTime;
          }
        },
      };
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = this.$t("add");
    },
    // 移除调休日期
    removeDomain(item) {
      var index =
        this.form.officialVacation.compensatoryLeaveDateList.indexOf(item);
      if (index !== -1) {
        this.form.officialVacation.compensatoryLeaveDateList.splice(index, 1);
      }
    },
    //添加调休日期
    addDomain() {
      this.form.officialVacation.compensatoryLeaveDateList.push({
        compensatoryLeaveDate: "",
      });
    },
    //是否每年循环
    changeIsCirculate() {
      this.form.officialVacation.vacationStartDate = null;
      this.form.officialVacation.vacationEndDate = null;
      this.form.officialVacation.compensatoryLeaveDateList = [
        {
          compensatoryLeaveDate: "",
        },
      ];
    },
    //改变分配日期
    changeAssignDate(val) {
      if (val != 1) {
        this.form.customVacation.assignDateValue = null;
      }
    },
    //改变分配规则
    changeAssignRule(val) {
      if (val == 1) {
        this.form.customVacation.customVacationAssignRuleList = [
          {
            vacationLimitValue: null,
            workAge: null,
          },
        ];
      } else {
        this.form.customVacation.fixedLimitValue = null;
      }
    },
    //改变有效期满时
    changeExpirationProcessingMethod(val) {
      if (val == 1) {
        this.form.customVacation.retentionPeriodDays = null;
        this.form.customVacation.retainedLimitPercentage = null;
        this.$forceUpdate();
      }
    },
    //改变是否允许预支假期
    changeIsAllowAdvanceVacation(val) {
      if (val == 0) {
        this.form.customVacation.prepayableAmount = null;
      }
    },
    //改变有效期类型
    changePeriodValidityType(val) {
      if (val != 3) {
        this.form.customVacation.validityDays = null;
      }
    },
    //修改分配方式
    changeAllocationScheme(val) {
      this.form.customVacation.assignDate = null;
      if (val > 1) {
        this.form.customVacation.isConvertCreditLimitBasedOnboardingDate = 0;
      }
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids;
      getSchedule(id).then((response) => {
        this.form = response.data;
        this.open = true;
        this.title = this.$t("modify");
      });
    },
    /** 查看按钮操作 */
    handleView(row) {
      this.reset();
      const id = row.id;
      getSchedule(id).then((response) => {
        if (response.data.vacationType == 0) {
          this.form = response.data;
        } else {
          this.form = response.data;
        }
        this.open = true;
        this.lookView = true;
        this.title = this.$t("view");
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          let data = JSON.parse(JSON.stringify(this.form));
          if (this.form.vacationType == 0) {
            delete data.customVacation;
          } else {
            delete data.officialVacation;
          }

          if (this.form.id != null) {
            updateSchedule(this.form).then((response) => {
              this.$modal.msgSuccess(this.$t("operation_successful"));
              this.open = false;
              this.getList();
            });
          } else {
            addSchedule(data).then((response) => {
              this.$modal.msgSuccess(this.$t("operation_successful"));
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    // 是否启用假期限额
    changeIsEnableHolidayLimit(val) {
      if (val == 0) {
        this.form.customVacation.allocationScheme = null;
        this.form.customVacation.assignDate = null;
        this.form.customVacation.assignDateValue = null;
        this.form.customVacation.assignRule = null;
        this.form.customVacation.fixedLimitValue = null;
        this.form.customVacation.customVacationAssignRuleList = [
          {
            vacationLimitValue: null,
            workAge: null,
          },
        ];
        this.form.customVacation.isConvertCreditLimitBasedOnboardingDate = null;
        this.form.customVacation.periodValidityType = null;
        this.form.customVacation.expirationProcessingMethod = null;
        this.form.customVacation.retainedLimitPercentage = null;
        this.form.customVacation.retentionPeriodDays = null;
        this.form.customVacation.isAllowAdvanceVacation = null;
        this.form.customVacation.validityDays = null;
      }
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal
        .confirm(this.$t("delete_data"))
        .then(function () {
          return delSchedule(ids);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess(this.$t("operation_successful"));
        })
        .catch(() => { });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "business/jqVacation/export",
        {
          ...this.queryParams,
        },
        `${this.$t("holiday_list")}_${new Date().getTime()}.xlsx`
      );
    },
    /** 导入按钮操作 */
    handleImport() {
      this.$refs.importModal.showModal();
    },
    handleAddAnnualLeave() {
      this.form.customVacation.customVacationAssignRuleList.push({
        vacationLimitValue: null,
        workAge: null,
      });
    },
    handleDeleteAnnualLeave(index) {
      this.form.customVacation.customVacationAssignRuleList.splice(index, 1);
    },
  },
};
</script>
<style lang="scss">
/*选择日期，年份的隐藏 */
.picker-date {
  .el-date-picker__header {
    span:nth-child(3) {
      /*第三个标签是span的标签，把它隐藏*/
      display: none;
    }

    button:nth-child(1) {
      display: none;
    }

    button:nth-child(5) {
      display: none;
    }
  }
}
</style>
